<template>
  <div class="Bargaining_container">
    <div class="Bargaining_head">
      <p @click="tiaozuan">全民砍价 ></p>
    </div>
    <div class="Bargaining_foot">
      <ul>
        <li v-for="(item, index) in list.slice(0, 3)" :key="index">
          <div>
            <img :src="item.pic" alt="" width="120px" height="120px" />
          </div>
          <div class="Bargaining_foot_add">
            <div class="foot_dv1">{{ item.name }}</div>
            <p class="foot_p">{{ item.recommendStatusStr }}</p>
            <div class="asss">
              <div>
                <p>{{ item.minPrice }}</p>
                低价
              </div>
              <div>
                <p>{{ item.originalPrice }}</p>
                原价
              </div>
              <div>
                <p>{{ item.numberOrders }}</p>
                销量
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API
      .List()
      .then((res) => {
        console.log(res);

        this.list = res.data.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    tiaozuan() {
      this.$router.push("/Allpeople");
    },
  },
};
</script>
<style lang="scss" scoped>
.Bargaining_container {
  width: 100%;
  height: 10.4rem;
  background-color: white;
  margin-top: 0.2rem;
}
.Bargaining_head {
  width: 100%;
  height: 1.2rem;
  /* // background-color: lightslategray; */
  border-bottom: 1px solid gainsboro;
  text-align: center;
  line-height: 1.2rem;
  box-sizing: border-box;
}
.Bargaining_head > p {
  font-size: 0.4rem;
}
.Bargaining_foot {
  width: 100%;
  height: 9.3rem;
  ul {
    width: 100%;
    height: 100%;
    li {
      width: 100%;
      height: 30%;
      box-sizing: border-box;
      border-bottom: 1px solid gainsboro;
      padding: 5px;
      display: inline-flex;
      .Bargaining_foot_add {
        margin-left: 5px;
        .foot_dv1 {
          font-size: 0.32rem;
        }
        .foot_p {
          color: gray;
          margin-top: 10px;
        }
        .asss {
          margin-top: 0.8rem;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          color: gray;
          div:nth-child(2) {
            margin-left: 10px;
          }
           div:nth-child(3) {
            margin-left: 10px;
          }
           div:nth-child(1) {
            p{
                color: red;
            }
          }
        }
      }
    }
  }
}

// .Bargaining_foot>ul>li{
//
// }

//  .Bargaining_foot_add{
//
//  }
// .Bargaining_foot_add>p{
//
// }
// .asss{
//     margin-top: 0.8rem;
//     display: inline-flex;
//     justify-content: center;
//     align-items: center;

// }
</style>